import React, { useEffect, useState, useCallback, useContext } from 'react'
import { connect } from 'react-redux'
import { parse } from 'query-string'
import { getLiveListInfo, DealLive } from '@/redux/async'
import { Helmet } from 'react-helmet'
import { getLiveListData } from 'api/base'
import Context from '@/config/context'
import Nav from './components/Nav'
import LiveInfo from './components/LiveInfo'
import './index.scss'
function List(props) {
    const { location, dispatch, liveListData, shouldLoad } = props
    const [query] = useState(parse(location.search))
    const [lives, setLives] = useState([])
    const [page, setPage] = useState(1)
    const [total, setTotal] = useState(1)
    const [isLoadMore, setIsLoadMore] = useState(false)
    useEffect(() => {
        dispatch(getLiveListInfo())
    }, [])
    useEffect(() => {
        setLives(liveListData.list || [])
        setTotal((livePage) => {
            return Math.ceil(liveListData.total / 30)
        })
    }, [liveListData])
    const livename = query.areaname ? query.areaname : query.pname

    const getLives = useCallback(async (obj) => {
        let { data } = await getLiveListData(obj)
        let list = DealLive(data.list)
        let video = list.filter(
            (live) => lives.findIndex((item) => item.roomId === live.roomId) === -1
        )
        setLives((lives) => {
            return lives.concat(video)
        })
        setTotal(Math.ceil(data.count / 30))
        setIsLoadMore(false)
    })
    const { picURL } = useContext(Context)
    const loadMore = useCallback(() => {
        if (page < total) {
            setIsLoadMore(true)
            setPage((page) => ++page)
            let obj = { parentAreaId: query.pid, areaId: query.areaId, page, pageSize: 30 }
            getLives(obj)
        }
    })
    return (
        <div className="list">
            <Helmet>
                <title>直播-{livename || ''}</title>
            </Helmet>
            <Nav />
            <div className="live-room live-top">
                <div className="cell-main  item xxl">{livename}</div>
                <div className="flex wrap ">
                    {lives &&
                        lives.map((data, i) => {
                            return <LiveInfo key={i} data={data} picURL={picURL} />
                        })}
                </div>
            </div>
            {lives.length > 0 && total > 1 ? (
                <div className="load-more">
                    <div
                        className="load-btn"
                        onClick={() => {
                            loadMore()
                        }}
                    >
                        {isLoadMore === false
                            ? page <= total
                                ? '请给我更多！'
                                : '没有更多了！'
                            : '加载中...'}
                    </div>
                </div>
            ) : null}
        </div>
    )
}

export default connect(
    function mapStateToProps(state) {
        return state
    },
    function mapDispatchToProps(dispatch) {
        return { dispatch }
    }
)(List)
